<template>
  <div>
    <staic v-if="isBuy" :priceQueryJsonStr="priceQueryJsonStr"/>
    <section class="min-container">
      <div class="con">
        <p class="title">云服务器</p>
        <div class="con-context">
          <p class="regionTitle">地域</p>
          <div class="regionCon">
            <div class="regionCon-left">
              <p>区域</p>
              <div class="recommendedAreas">
                <span class="recommend">推荐区域:</span>
                <div class="areas">
                  <div class="areasItem" v-for="(item, index) in preferList" :key="index" @click="getAvailabList(item)">
                    {{ item.regionName }}
                  </div>
                </div>
              </div>
              <p>可用区域</p>
            </div>
            <div class="regionCon-right">
              <el-popover placement="bottom" :width="600" :visible="popShow" >
                <template #reference>
                  <div class="select" @click="popShow = !popShow">{{ currentRegion }}</div>
                </template>
                <div class="selectPop">
                  <div class="pop-item" v-for="(item, index) in areaList" :key="index">
                    <div class="selectLeft">{{ item.label }}</div>
                    <div class="selectRight">
                      <div class="select-item" v-for="(child, k) in item.children" :key="k"
                        @click="getAvailabList(child)">
                        {{ child.regionName }}
                      </div>
                    </div>
                  </div>
                </div>
              </el-popover>
              <div class="selectable">
                <span v-for="(item, index) in usableList" @click="checkUsable(item)" :key="index"
                :class="{ active: item.type == 2 }">
                  {{ item.zoneNames }}
                </span>
              </div>
            </div>
          </div>
          <p class="regionTitle">规格</p>
          <div class="spec-gray">
            <div class="cpuTypeList">
              <span>CPU架构：</span>
              <div class="CPUarchitecture">
                <div :class="{active: currentCpu == 1}" @click="changeCpu(1)">
                  X86计算
                </div>
                <div :class="{active: currentCpu == 2}" @click="changeCpu(2)">
                  鲲鹏计算
                </div>
              </div>
            </div>
            <div>
            <div v-if="currentCpu == 1">
              <div class="selectSpecification">
                <div>
                  <span>vCPUs:</span>
                  <el-select v-model="x86vCPUs" class="m-2" placeholder="----- 请选择vCPUs -----"
                    style="width: 288px; margin: 0 20px" clearable @change="changeX86">
                    <el-option
                      v-for="item in x86vCPUsOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </div>
                <div>
                  <span>内存:</span>
                  <el-select v-model="x86Memory" class="m-2" placeholder="----- 请选择内存 -----" style="width: 288px;margin: 0 20px"
                    clearable @change="changeX86">
                    <el-option
                      v-for="item in x86MemoryOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </div>
              </div>
              <div class="spec-box" v-if="!x86vCPUs && !x86Memory">
                <span v-for="(item, index) in currentSpecList" @click="changeType(index)" :key="index"
                  :class="{ active: item.type == 1 }">
                  {{ item.title }}
                </span>
              </div>
              <div class="spec-box" v-if="!x86vCPUs && !x86Memory">
                <template v-for="(item, index) in specList" :key="index">
                  <span v-if="item.os_extra_specs['ecs:generation']" @click="changeSpec(index)" :class="{ active: item.type == 1 }">
                    {{ item.os_extra_specs["ecs:generation"] }}
                  </span>
                </template>
              </div>
            </div>
            <div v-else>
              <div class="selectSpecification">
                <div>
                  <span>vCPUs:</span>
                  <el-select v-model="kunPengvCPUs" class="m-2" placeholder="----- 请选择vCPUs -----"
                    style="width: 288px; margin: 0 20px" clearable @change="changeKunPeng">
                    <el-option
                      v-for="item in kunPengvCPUsOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </div>
                <div>
                  <span>内存:</span>
                  <el-select v-model="kunPengMemory" class="m-2" placeholder="----- 请选择内存 -----" style="width: 288px;margin: 0 20px"
                    @change="changeKunPeng" clearable>
                    <el-option
                      v-for="item in kunPengMemoryOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </div>
              </div>
              <div class="spec-box" v-if="!kunPengvCPUs && !kunPengMemory">
                <span v-for="(item, index) in currentSpecList" @click="changeType(index)" :key="index"
                  :class="{ active: item.type == 1 }">
                  {{ item.title }}
                </span>
              </div>
              <div class="spec-box" v-if="!kunPengvCPUs && !kunPengMemory">
                <template v-for="(item, index) in specList" :key="index">
                  <span v-if="item.os_extra_specs['ecs:generation']" @click="changeSpec(index)" :class="{ active: item.type == 1 }">
                    {{ item.os_extra_specs["ecs:generation"] }}
                  </span>
                </template>
              </div>
              </div>
              <div class="specificationOutside">
                <div class="spec-outside">
                  <div class="title">
                    <div>实例类型</div>
                    <div>规格名称</div>
                    <div>VCPUs</div>
                    <div>内存</div>
                    <div>基准/最大带宽</div>
                    <div>内网收发包</div>
                  </div>
                  <div
                    v-for="(item, index) in dataList"
                    :key="index"
                    class="spec-item"
                    :id="item.name"
                    :ref="'spec' + index"
                    :class="{ active: item.type == 2 }"
                    @click="chooseSpec(index)"
                  >
                    <div>{{ getTypeLabel(item) }}</div>
                    <div>{{ item.name }}</div>
                    <div>{{ item.vcpus }}vCPUs</div>
                    <div>{{ item.ram / 1024 || 0 }}GiB</div>
                    <div>
                      {{ item.os_extra_specs["quota:min_rate"] ? item.os_extra_specs["quota:min_rate"] / 1000 : 0 }}
                      /
                      {{ item.os_extra_specs["quota:min_rate"] ? item.os_extra_specs["quota:min_rate"] / 1000 : 0 }}
                      Gbit/s
                    </div>
                    <div>{{ item.os_extra_specs["quota:max_pps"] ? item.os_extra_specs["quota:max_pps"] / 10000 : 0}}万PPS</div>
                  </div>
                </div>
              </div>
              <div class="specBottom">
                当前规格：{{ getTypeLabel(currentSpec) }}|{{ currentSpec.name }}|{{
                  currentSpec.vcpus
                }}vCPUs|{{ currentSpec.ram / 1024 }}GiB
              </div>
            </div>
          </div>
          <div class="spec-gray">
            <el-row>
            <el-col :span="2" class="spec-label">镜像</el-col>
            <el-col :span="22" class="spec-value">
              <div class="images">
                <div class="imagesTitle">
                  <span>公共镜像</span>
                </div>
                <div class="imagesCon">
                  <div>
                    <el-select v-model="selectStym" class="m-2" placeholder="请选择操作系统"
                      style="width: 288px; margin-right: 20px; height: 36px" @visible-change="visibleChange">
                      <el-option v-for="item in selectStymOptions" :key="item.__platform" :label="item.__platform"
                        :value="item.__platform" />
                    </el-select>
                  </div>
                  <div>
                    <el-select v-model="selectBanbenValue" class="m-2" placeholder="请选择操作系统版本"
                      style="width: 288px; margin-right: 20px; height: 36px" @visible-change="visibleBanbenChange">
                      <el-option v-for="item in selectBanbenOptions" :key="item.__os_version" :label="item.__os_version"
                        :value="item.__os_version" />
                    </el-select>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="2" class="spec-label">磁盘</el-col>
            <el-col :span="22" class="spec-value">
              <div class="clouds">
                <div class="cloudTitle">
                  <span class="yunTitle">云硬盘</span>
                  <div class="systemDisk">
                    <span>系统盘</span>
                    <div style="margin: 0 20px">
                      <el-select v-model="stytemValue" class="m-2" placeholder="内存" style="width: 288px"
                        @change="stytemValueChange">
                        <el-option v-for="item in stytemOptions" :key="item.value" :label="item.label"
                          :value="item.value" />
                      </el-select>
                    </div>
                    <div class="addSubtractBox">
                      <el-input-number v-model="stytemNum" :min="1" step-strictly :max="7500" style="width: 100%"
                        @change="isNumber" />
                    </div>
                    GiB
                    <span style="margin-left: 20px">GBIIOPS上限7500，1OPS突发上限16000</span>
                  </div>
                  <div class="dataDisk">
                    <el-col :span="2">
                      <span class="addDataDisk">数据盘</span>
                    </el-col>
                    <el-col :span="22">
                      <div v-for="(item, index) in data_volume" :key="index" style="display: flex; align-items: center"
                        class="addMsgBox">
                        <div style="margin: 0 10px 0 0">
                          <el-select v-model="item.diskType" class="m-2" placeholder="内存" style="width: 288px" @change="isNumber1">
                            <el-option v-for="item in stytemOptions" :key="item.value" :label="item.label" :value="item.value" />
                          </el-select>
                        </div>
                        <div class="addSubtractBox">
                          <el-input-number v-model="item.size" :min="0" step-strictly :max="5000" style="width: 100%"
                            @change="isNumber1" />
                        </div>
                        GiB
                        <span style="margin: 0 20px">GBIIOPS上限1800，1OPS突发上限5000</span>
                        <el-button type="danger" plain @click="reduce(index)">-</el-button>
                      </div>
                      <el-button style="margin: 20px 0" type="primary" plain v-if="data_volume.length < 5"
                        @click="tianjia">+</el-button>
                    </el-col>
                  </div>
                </div>
                <div class="cloudBottom">
                  <span>带宽</span>
                  <div class="addSubtractBox">
                    <el-input-number v-model="daiKuanNum" :min="1" step-strictly style="width: 100%"
                      @change="isNumber2" />
                  </div>
                  <span>Mbit/s</span>
                  <el-button @click="jing(item)" :type="item.type" plain style="margin-left: 30px" v-for="item in dongJIngTypeList" :key="item">{{ typeInChina(item.value) }}</el-button>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row class="network">
            <el-col :span="2">网络</el-col>
            <el-col :span="22">
              <div style="display: flex;">
                <el-select v-model="network" class="network-select" placeholder="请选择网络" @visible-change="networkChange">
                  <el-option
                    v-for="item in networkOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                <el-select v-model="nics[0].subnet_id" class="network-select" placeholder="请选择子网" @change="subnetChange">
                  <el-option
                    v-for="item in subnetOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                <el-select v-model="chooseType" class="network-select" placeholder="IP地址分配">
                  <el-option label="自动分配IP地址" :value="1"/>
                  <el-option label="手动分配IP地址" :value="2"/>
                </el-select>

                <div v-if="chooseType == 2">
                  <el-input placeholder="192" style="width:50px" disabled/> ·
                  <el-input placeholder="168" style="width:50px" disabled/> ·
                  <el-input placeholder="0" style="width:50px" disabled/> ·
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="1-254"
                    placement="top"
                  >
                    <el-input v-model="ipValue" class="ipValue" @input="getIpAddress(0)"/>
                  </el-tooltip>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row class="network">
            <el-col :span="2">扩展网卡</el-col>
            <el-col :span="22" v-if="!isAddNetwork">
              <div style="display: flex;align-items: center;" @click="isAddNetwork = true">
                <el-icon><CirclePlus /></el-icon>
                <span style="font-weight: 600;margin: 0 20px;">增加一块网卡</span><span>您还可以增加 1 块网卡</span>
              </div>
            </el-col>
            <el-col :span="22" v-else>
              <div style="display: flex;">
                <el-select v-model="nics[1].subnet_id" class="network-select" placeholder="请选择子网" @change="subnetChange">
                  <el-option
                    v-for="item in subnetOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                <el-select v-model="chooseType2" class="network-select" placeholder="IP地址分配">
                  <el-option label="自动分配IP地址" :value="1"/>
                  <el-option label="手动分配IP地址" :value="2"/>
                </el-select>

                <div v-if="chooseType2 == 2">
                  <el-input placeholder="192" style="width:50px" disabled/> ·
                  <el-input placeholder="168" style="width:50px" disabled/> ·
                  <el-input placeholder="0" style="width:50px" disabled/> ·
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="1-254"
                    placement="top"
                  >
                    <el-input v-model="ipValue2" class="ipValue" @input="getIpAddress(1)"/>
                  </el-tooltip>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="2" class="spec-label">购买时长</el-col>
            <el-col :span="22" class="spec-value">
              <div class="times">
                <el-cascader :options="timeOptions" v-model="timeSpecificationValue" @change="renewTypeNumChange" />
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="2" class="spec-label">购买数量</el-col>
            <el-col :span="22" class="spec-value">
              <div class="nums">
                <div class="addSubtractBox">
                  <el-input-number v-model="numValue" :min="1" :max="10" step-strictly style="width: 100%"
                    @change="isNumber3" />
                </div>
                <span>一次最多可购买10台</span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="2" class="spec-label">是否自动续费</el-col>
            <el-col :span="22" class="spec-value">
              <div class="mb-2 flex items-center text-sm" style="margin: 8px 0">
                <el-radio-group v-model="autoRenewal" class="ml-4" @change="changeRenewal">
                  <el-radio :label="true" size="large">是</el-radio>
                  <el-radio :label="false" size="large">否</el-radio>
                </el-radio-group>
              </div>
            </el-col>
          </el-row>
          <el-row v-if="isBuy">
            <el-col :span="2" class="spec-label">服务器名称</el-col>
            <el-col :span="22" class="spec-value">
              <el-tooltip class="box-item" effect="dark" content="服务器名称不能是中文" placement="top">
                <el-input v-model="serivceName" placeholder="请输入服务器名称" class="isAnmount" @blur="isNumber4" @input="getSerivceName"/>
              </el-tooltip>
            </el-col>
          </el-row>
          <el-row v-if="isBuy">
            <el-col :span="2" class="spec-label">用户名</el-col>
            <el-col :span="22" class="spec-value">
              <p class="userName">root</p>
            </el-col>
          </el-row>
          <el-row v-if="isBuy">
            <el-col :span="2" class="spec-label">密码</el-col>
            <el-col :span="22" class="spec-value">
              <el-input v-model="passWord" placeholder="请输入密码" maxlength="26" class="passWord" type="password" show-password @blur="isNumber5" />
            </el-col>
          </el-row>
          <el-row v-if="isBuy">
            <el-col :span="2" class="spec-label">确认密码</el-col>
            <el-col :span="22" class="spec-value">
              <el-input v-model="surePassWord" placeholder="请确定密码" maxlength="26" class="passWord" type="password" show-password
                @blur="isNumber6" />
            </el-col>
          </el-row>
          </div>
          <div v-if="!isBuy" class="spec-gray spec-between">
            <div>
              费用总计：<span>￥{{ totalPrice || 0 }}</span>
            </div>
            <el-button type="primary" @click="handleBuy">去购买</el-button>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref, watch } from "vue";
import {
  availabilityZone,
  regionList,
  listFlavors,
  glanceListImages,
  listVpcs,
  listSubnets
} from "@/api/cloud/index";
import staic from "@/views/client/cloudService/components/staic.vue";
import Bus from "@/utils/bus";
import { payBtn } from "@/api/pay/pay";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from 'element-plus'
const router = useRouter();

const currentRegion = ref(""); // 当前选中区域
const currentRegionId = ref("cn-east-3"); // 当前选中区域id
const areaList = ref<any>([
  { label: '拉美', children: [] },
  { label: '非洲', children: [] },
  { label: '亚太', children: [] },
  { label: '土耳其', children: [] },
]); // 区域列表
const usableList = ref<any>([]); // 可用区域列表
const currentArea = ref(''); // 当前选中可用区域
const popShow = ref(false); // 区域弹窗显示
const preferList = ref<any>([]); // 推荐区域列表
const X86List = ref<any>([]); // X86架构列表
const kunPengList = ref<any>([]); // 鲲鹏架构列表
const currentCpu = ref(1); // 当前选中CPU
const currentSpecList = ref<any>([]); // 当前规格列表
const x86SpecList = ref<any>([
  // X86架构规格类型
  { title: "通用计算增强型", type: 1, performancetype: "computingv3" },
  { title: "通用计算型", type: 1, performancetype: "normal" },
  { title: "内存优化型", type: 1, performancetype: "highmem" },
  { title: "超大内存型", type: 1, performancetype: "saphana" },
  { title: "磁盘增强型", type: 1, performancetype: "diskintensive" },
  { title: "超高I/O型实例", type: 1, performancetype: "highio" },
  { title: "GPU加速型", type: 1, performancetype: "gpu" },
  { title: "AI加速型", type: 1, performancetype: "ascend" },
  { title: "通用入门型", type: 1, performancetype: "entry" },
]);
const kunPengSpecList = ref<any>([
  // 鲲鹏架构规格类型
  { title: "AI加速型", type: 1, performancetype: "ascend" },
  { title: "鲲鹏通用计算增强型", type: 1, performancetype: "kunpeng_computing" },
  { title: "鲲鹏内存优化型", type: 1, performancetype: "kunpeng_highmem" },
  { title: "鲲鹏超高I/O型", type: 1, performancetype: "kunpeng_highio" },
]);
const x86vCPUs = ref(); // X86架构CPU
const x86vCPUsOptions = ref<any>([]);// X86架构CPU列表
const x86Memory = ref(); // X86架构内存
const x86MemoryOptions = ref<any>([]);// X86架构内存列表
const kunPengvCPUs = ref(); // 鲲鹏架构CPU
const kunPengvCPUsOptions = ref<any>([]); // 鲲鹏架构CPU列表
const kunPengMemory = ref(); // 鲲鹏架构内存
const kunPengMemoryOptions = ref<any>([]); // 鲲鹏架构内存列表
const specList = ref<any>([]); // 规格类型列表
const dataList = ref<any>([]); // 规格列表
const currentSpec = ref<any>({}); // 当前规格信息
const isFrist = ref(true); // 是否首次加载
const selectStym = ref();
const selectStymOptions = ref<any>([]);
const selectBanbenOptions = ref<any>([]);
const totalPrice = ref(0); // 总价
const autoRenewal = ref(false); // 自动续费
const timeSpecificationValue = ref<any>(['2','1']); // 购买时长
const surePassWord = ref();
const passWord = ref();
const stytemsValue = ref();
const timeOptions = ref<any>([
  // 时长列表
{
    value: '2',
    label: '包月',
    children: [
      { value: '1', label: '1个月' },
      { value: '2', label: '2个月' },
      { value: '3', label: '3个月' },
      { value: '4', label: '4个月' },
      { value: '5', label: '5个月' },
      { value: '6', label: '6个月' },
      { value: '7', label: '7个月' },
      { value: '8', label: '8个月' },
      { value: '9', label: '9个月' },
      { value: '10', label: '10个月' },
      { value: '11', label: '11个月' }
    ]
  },
  {
    value: '3',
    label: '包年',
    children: [
      { value: '1', label: '1年' },
      { value: '2', label: '2年' },
      { value: '3', label: '3年' }
    ]
  }
]);
const jingDongList = ref<any>([
  {name: '华南-广州', typeList: [{type : 'primary', value :'5_bgp'}, {type : '', value :'5_sbgp'}]},
  {name: '华东-上海一', typeList: [{type : 'primary', value :'5_bgp'}, {type : '', value :'5_sbgp'}]},
  {name: '华东-上海二', typeList: [{type : 'primary', value :'5_bgp'}, {type : '', value :'5_sbgp'}]},
  {name: '华北-北京一  ', typeList: [{type : 'primary', value :'5_bgp'}, {type : '', value :'5_sbgp'}]},
  {name: '中国-香港', typeList: [{type : 'primary', value :'5_bgp'}, {type : '', value :'5_youxuanbgp'}]},
  {name: '亚太-曼谷', typeList: [{type : 'primary', value :'5_bgp'}]},
  {name: '亚太-新加坡', typeList: [{type : 'primary', value :'5_bgp'}]},
  {name: '非洲-约翰内斯堡', typeList: [{type : 'primary', value :'5_bgp'}]},
  {name: '西南-贵阳一', typeList: [{type : 'primary', value :'5_sbgp'}]},
  {name: '华北-北京四', typeList: [{type : 'primary', value :'5_bgp'}, {type : '', value :'5_sbgp'}]},
  {name: '拉美-圣地亚哥', typeList: [{type : 'primary', value :'5_bgp'}]},
  {name: '拉美-圣保罗一', typeList: [{type : 'primary', value :'5_bgp'}]},
  {name: '拉美-墨西哥城一', typeList: [{type : 'primary', value :'5_bgp'}]},
  {name: '拉美-布宜诺斯艾利一', typeList: [{type : 'primary', value :'5_bgp'}]},
  {name: '拉美-利马一', typeList: [{type : 'primary', value :'5_bgp'}]},
  {name: '拉美-圣地亚哥二', typeList: [{type : 'primary', value :'5_bgp'}]}
]);
const dongJIngTypeList = ref([{type: 'primary', value :'5_bgp'}, {type: '', value:'5_sbgp'}]);//动态静态数组，默认华东上海一
Bus.emit("iptype", dongJIngTypeList.value[0].value);

const typeInChina = (val: string) => {
  if ('5_bgp'== val) {
    return '动态';
  } else if ('5_sbgp' == val) {
    return '静态';
  } else if ('5_youxuanbgp' == val) {
    return '优选';
  }
}
const selectBanbenValue = ref();
const stytemOptions = ref<any>([
  { label: "高IO", value: "SAS" },
  { label: "通用型SSD", value: "GPSSD" },
  { label: "超高IO", value: "SSD" },
  { label: "极速IO", value: "ESSD" },
]);
const jingDongType = ref("19_bgp");
const daiKuanNum = ref(5);
const stytemNum = ref(40);
const data_volume = ref<any>([]); // 数据盘

const stytemValue = ref('GPSSD');
Bus.emit("stytemValue", stytemValue.value);
const numValue = ref(1);
Bus.emit("num", numValue.value);
const priceQueryJsonStr = ref('');
const isBuy = ref(false) // 是否购买
const priceKey = ref(''); // 加入购物车的参数
const serivceName = ref(''); // 自定义的服务器名称
const networkOptions = ref<any>([]); // 网络下拉框vpc
const subnetOptions = ref<any>([]); // 网络下拉框type

const network = ref(''); // vpc
const chooseType = ref(1); // ip
const chooseType2 = ref(1); // 扩展ip
const ipValue = ref(''); // 手动输入的ip地址
const ipValue2 = ref(''); // 扩展手动输入的ip地址
const isAddNetwork =ref(false); // 是否拓展网卡
const nics = ref<any>([
  {subnet_id:'',ip_address:''},
  {subnet_id:'',ip_address:''},
]);//子网+ip
const imagesList = ref<any>([]);//接口获取的全部镜像列表
const imagesListAll = ref<any>([]);//所有的镜像数据

const props = defineProps({
  // 类型
  type: {
    type: String,
    default: "",
  },
  //服务器型号
  name:{
    type: String,
    default: "",
  }
});

onMounted(() => {
  getRegionList();
  vcpList();
  isBuy.value = props.type == "buy";
});

watch(props, (val) => {
  isBuy.value = val.type == "buy";
})

// 获取规格扩展信息列表
const getFlavors = () => {
  listFlavors({
    regionId: currentRegionId.value,
    availabilityZone: currentArea.value,
  }).then((res: any) => {
    kunPengList.value = [];
    X86List.value = [];
    res.data.forEach((item: any) => {
      item.type = 1;
      let performancetype = item.os_extra_specs["ecs:performancetype"];
      let az = item.os_extra_specs["cond:operation:az"];
      let kp = item.os_extra_specs["info:cpu:name"];
      if (x86SpecList.value.some((i:any) => i.performancetype == performancetype)) {
        if (!az || az.indexOf(currentArea.value + '(normal)') > -1) X86List.value.push(item);
      } 
      if (kunPengSpecList.value.some((i:any) => i.performancetype == performancetype) && kp.includes('Kunpeng')) {
        if (!az || az.indexOf(currentArea.value + '(normal)') > -1) kunPengList.value.push(item);
      }
    });
    changeCpu(1) // 默认选中
  });
}

// 筛选数据
const filterData = () => {
  let list = <any>[];
  if (currentCpu.value == 1) {
    list = X86List.value;
    if (x86vCPUs.value) {
      list = list.filter((item: any) => item.vcpus == x86vCPUs.value);
      currentSpecList.value.forEach((item: any) => item.type = 1)
      specList.value.forEach((item: any) => item.type = 1)
    }
    if (x86Memory.value) {
      list = list.filter((item: any) => item.ram / 1024 == x86Memory.value);
      currentSpecList.value.forEach((item: any) => item.type = 1)
      specList.value.forEach((item: any) => item.type = 1)
    }
    if (!x86vCPUs.value && !x86Memory.value) {
      let row = currentSpecList.value.find((item: any) => item.type == 2);
      list = list.filter((item: any) => item.os_extra_specs["ecs:performancetype"] == row?.performancetype);
      let type2 = specList.value.find((item: any) => item.type == 2)?.os_extra_specs["ecs:generation"];
      if (type2 != '全部') {
        list = list.filter((item: any) => item.os_extra_specs["ecs:generation"] == type2 || item.name.split(".")[0] == type2);
      }
    }
  } else {
    list = kunPengList.value;
    if (kunPengvCPUs.value) {
      list = list.filter((item: any) => item.vcpus == kunPengvCPUs.value);
      currentSpecList.value.forEach((item: any) => item.type = 1)
      specList.value.forEach((item: any) => item.type = 1)
    }
    if (kunPengMemory.value) {
      list = list.filter((item: any) => item.ram / 1024 == kunPengMemory.value);
      currentSpecList.value.forEach((item: any) => item.type = 1)
      specList.value.forEach((item: any) => item.type = 1)
    }
    if (!kunPengvCPUs.value && !kunPengMemory.value) {
      let row = currentSpecList.value.find((item: any) => item.type == 2);
      list = list.filter((item: any) => item.os_extra_specs["ecs:performancetype"] == row?.performancetype);
      let type2 = specList.value.find((item: any) => item.type == 2)?.os_extra_specs["ecs:generation"];
      if (type2 != '全部') {
        list = list.filter((item: any) => item.os_extra_specs["ecs:generation"] == type2 || item.name.split(".")[0] == type2);
      }
    }
  }
  dataList.value = list;
  defaultChoose();
  getOptions(currentCpu.value == 1 ? x86vCPUsOptions : kunPengvCPUsOptions, 'vCPUs');
  getOptions(currentCpu.value == 1 ? x86MemoryOptions : kunPengMemoryOptions, 'GiB');
}

// 默认选中规格
const defaultChoose = () => {
  let val = isFrist.value && props.name ? props.name : dataList.value[0].name;
  const index = dataList.value.map((item: any) => item.name).indexOf(val);
  if (index >= 0) chooseSpec(index);
  setTimeout(() => {
    isFrist.value = false;
    let temp = document.getElementById(dataList.value[index].name);
    temp?.scrollIntoView({ block: "center", behavior: "smooth" });
  }, 300);
}

// 获取区域列表
const getRegionList = () => {
  regionList({}).then((res: any) => {
    areaList.value[0].children  = res.data.filter((item: any) => {
      return item.regionId === "na-mexico-1" || item.regionId === "la-south-2";
    });
    areaList.value[1].children  = res.data.filter((item: any) => {
      return item.regionId === "af-south-1";
    });
    areaList.value[2].children  = res.data.filter((item: any) => {
      return (
        item.regionId === "ap-southeast-2" ||
        item.regionId === "cn-north-1" ||
        item.regionId === "cn-north-9" ||
        item.regionId === "cn-south-1" ||
        item.regionId === "cn-south-4" ||
        item.regionId === "cn-southwest-2" ||
        item.regionId === "cn-east-3" ||
        item.regionId === "cn-north-4"
      );
    });
    areaList.value[3].children  = res.data.filter((item: any) => {
      return item.regionId === "tr-west-1";
    });
    preferList.value = res.data.filter((item: any) => {
      return (
        item.regionId === "cn-north-9" ||
        item.regionId === "cn-southwest-2" ||
        item.regionId === "cn-south-1" ||
        item.regionId === "cn-north-4" ||
        item.regionId === "cn-east-3"
      );
    });
    getAvailabList(null);
  });
};

// 可用区域列表
const getAvailabList = (item: any) => {
  currentRegion.value = item ? item.regionName : areaList.value[2].children[0].regionName;
  currentRegionId.value = item ? item.regionId : areaList.value[2].children[0].regionId;
  dongJIngTypeList.value = jingDongList.value.filter(item => item.name == currentRegion.value)[0]?.typeList || [{type : 'primary', value :'5_bgp'}];
  jingDongType.value = dongJIngTypeList.value[0].value == '5_bgp' ? '19_bgp' : '19_sbgp';
  Bus.emit("iptype", dongJIngTypeList.value[0].value);
  Bus.emit("regionId", currentRegionId.value);
  availabilityZone({ regionId: currentRegionId.value }).then((res: any) => {
    res.data.availabilityZoneInfo.forEach((item: any) => {
      item.type = 1;
      let last = item.zoneName.substr(-1);
      last = last.charCodeAt() - 96;
      item.zoneNames = "可用区域" + last;
    });
    usableList.value = res.data.availabilityZoneInfo;
    usableList.value.unshift({
      zoneName: "随机分配",
      zoneNames: "随机分配",
      type: 2
    });
  });
  popShow.value = false;
  Bus.emit("totalArea", currentRegion.value);
  getFlavors();
};

const getData = () => {
  let data = {
    product_infos: [
      {
        id: "1",
        cloud_service_type: "hws.service.type.ec2",
        resource_type: "hws.resource.type.vm",
        resource_spec: (currentSpec.value.name || "c7.large.2") + ".linux",
        region: currentRegionId.value || "cn-east-3",
        available_zone: currentArea.value || "cn-east-3a",
        period_type: timeSpecificationValue.value[0] || 2,
        period_num: timeSpecificationValue.value[1] || 1,
        subscription_num: numValue.value,
      },
      {
        id: "2",
        cloud_service_type: "hws.service.type.ebs",
        resource_type: "hws.resource.type.volume",
        resource_spec: stytemValue.value || "GPSSD",
        region: currentRegionId.value || "cn-east-3",
        available_zone: currentArea.value || "cn-east-3a",
        period_type: timeSpecificationValue.value[0] || 2,
        period_num: timeSpecificationValue.value[1] || 1,
        subscription_num: 1,
        resource_size: stytemNum.value || "40",
        size_measure_id: "17",
      },
      {
        id: "3",
        cloud_service_type: "hws.service.type.vpc",
        resource_type: "hws.resource.type.ip",
        resource_spec: "5_sbgp",
        region: currentRegionId.value || "cn-east-3",
        available_zone: "",
        period_type: timeSpecificationValue.value[0] || 2,
        period_num: timeSpecificationValue.value[1] || 1,
        subscription_num: 1,
      },
      {
        id: "4",
        cloud_service_type: "hws.service.type.vpc",
        resource_type: "hws.resource.type.bandwidth",
        resource_spec: jingDongType.value || "19_sbgp",
        region: currentRegionId.value || "cn-east-3",
        available_zone: "",
        period_type: timeSpecificationValue.value[0] || 2,
        period_num: timeSpecificationValue.value[1] || 1,
        subscription_num: 1,
        resource_size: daiKuanNum.value || 1,
        size_measure_id: 15,
      },
    ],
  };
  let newId = 4;
  data_volume.value?.forEach((item: any) => {
    if (item.diskType != '') {
      newId++
      data.product_infos.push({
        id: newId + '',
        cloud_service_type: "hws.service.type.ebs",
        resource_type: "hws.resource.type.volume",
        resource_spec: item.diskType,
        region: currentRegionId.value || "cn-east-3",
        available_zone: currentArea.value || "cn-east-3a",
        period_type: timeSpecificationValue.value[0] || 2,
        period_num: timeSpecificationValue.value[1] || 1,
        subscription_num: 1,
        resource_size: item.size || "1",
        size_measure_id: "17",
      })
    }
  })
  return data
}
// 查询价格
const getPrice = () => {
  let data = getData();
  priceQueryJsonStr.value = JSON.stringify(data);
  payBtn(data).then((res: any) => {
    totalPrice.value = res.data.price;
    priceKey.value = res.data.priceKey;
    Bus.emit("price", totalPrice.value);
    Bus.emit("priceKey", priceKey.value);
  });
};

// 选择可用区域
const checkUsable = (item: any) => {
  usableList.value.forEach((res: any) => {
    res.type = 1;
  });
  item.type = item.type == 1 ? 2 : 1;
  currentArea.value = item.zoneName == '随机分配' ? null : item.zoneName;
  Bus.emit("availableAreas", item.zoneNames);
  getFlavors();
};

// 切换CPU
const changeCpu = (val: number) => {
  currentCpu.value = val;
  if (val == 1) {
    filterType(X86List.value, 0)
    filterSpec(X86List.value, 0);
    currentSpec.value = X86List.value[0];
  } else {
    currentSpec.value = kunPengList.value[0];
    filterType(kunPengList.value, 0)
    filterSpec(kunPengList.value, 0);
  }
  filterData();
};

// 切换CPU / 内存
const changeX86 = (e: any) => {
  if (!x86vCPUs.value && !x86Memory.value) {
    currentSpecList.value[0].type = 2;
    specList.value[0].type = 2;
  }
  filterData();
};

// 切换CPU / 内存
const changeKunPeng = (e: any) => {
  if (!kunPengvCPUs.value && !kunPengMemory.value) {
    currentSpecList.value[0].type = 2;
    specList.value[0].type = 2;
  }
  filterData();
};

// 切换CPU类型
const changeType = (index: number) => {
  currentSpecList.value.forEach((item: any, k: number) => {
    item.type = index == k ? 2 : 1;
  });
  specList.value.forEach((item: any) => item.type = 1)
  specList.value[0].type = 2;
  filterData();
  filterSpec(dataList.value, index);
};

// 过滤类型
const filterType = (data: any, index: number) => {
  let array = currentCpu.value == 1 ? x86SpecList.value : kunPengSpecList.value;
  let list = <any>[];
  array.forEach((item: any) => {
    if (data.some((i: any) => i.os_extra_specs["ecs:performancetype"] == item.performancetype)) {
      list.push(item);
    }
  });
  list.forEach((item: any, k: number) => {
    item.type = k == index ? 2 : 1;
  });
  currentSpecList.value = list;
}

// 过滤规格类型
const filterSpec = (data: any, index: number) => {
  let array = currentSpecList.value;
  let type = array[index].performancetype;
  let list = data.filter((item: any) => type == item.os_extra_specs["ecs:performancetype"]);
  list = list.map((item: any) => {
    return {
      type: 1,
      os_extra_specs: { "ecs:generation": item.os_extra_specs["ecs:generation"] ? item.os_extra_specs["ecs:generation"] : item.name.split(".")[0] },
    }
  })
  list.unshift({
    type: 2,
    os_extra_specs: { "ecs:generation": '全部' },
  })
  for (let i = 0; i < list.length - 1; i++) {
    for (let j = i + 1; j < list.length; j++) {
      if (
        list[i].os_extra_specs["ecs:generation"] ==
        list[j].os_extra_specs["ecs:generation"]
      ) {
        list.splice(j, 1);
        j--;
      }
    }
  }
  specList.value = list;
}

// 过滤下拉选项
const getOptions = (item: any, unit: string) => {
  let data = <any>[];
  if (currentCpu.value == 1) {
    data = (x86vCPUs.value || x86Memory.value) ? dataList.value : X86List.value;
  } else {
    data = (x86vCPUs.value || x86Memory.value) ? dataList.value : kunPengList.value;
  }
  let list = <any>[];
  if (unit == 'vCPUs') {
    data.forEach((res: any) => {
      if (list.length == 0 || !list.some((i:any) => i.value == res.vcpus)) {
        list.push({
          label: res.vcpus + unit,
          value: res.vcpus,
        });
      }
    });
  } else {
    data.forEach((res: any) => {
      if (list.length == 0 || !list.some((i:any) => i.value == res.ram / 1024)) {
        list.push({
          label: (res.ram / 1024) + unit,
          value: res.ram / 1024,
        });
      }
    });
  }
  list.sort((a:any, b:any) => a.value - b.value);
  item.value = list;
}

// 切换筛选规格
const changeSpec = (index: number) => {
  specList.value.forEach((res: any, k: number) => {
    res.type = k == index ? 2 : 1;
  });
  filterData();
};

// 选择规格
const chooseSpec = (index: number) => {
  dataList.value.forEach((item: any, k: number) => item.type = index == k ? 2 : 1)
  currentSpec.value = dataList.value[index];
  selectStym.value = '';
  selectBanbenValue.value = '';
  getImagesList();
  getPrice();
  Bus.emit("currentSpec", currentSpec.value);
};

// 获取规格中文名称
const getTypeLabel = (item: any) => {
  if (!item.os_extra_specs) return '';
  let value = item.os_extra_specs["ecs:performancetype"];
  let name = item.name ? item.name.split(".")[0] : "";
  let list = currentCpu.value == 1 ? x86SpecList.value : kunPengSpecList.value;
  let row = list.find(val => val.performancetype == value);
  return row ? row.title + name : "";
}

// 网络切换获取vpc数据
const networkChange = () => {
  subnetList();
  if (network.value) {
    Bus.emit("network", network.value);
  }
};

// 选中的ip
const getIpAddress = (index: number) => {
  if (ipValue.value == ipValue2.value) return ElMessage.error('ip地址不能重复')
  if (index == 0) {
    nics.value[index].ip_address = '192.168.0.' + ipValue.value;
  } else {
    nics.value[index].ip_address = '192.168.0.' + ipValue2.value;
  }
  subnetChange();
}

// 获取vcp列表
const vcpList = () => {
  listVpcs({regionId: currentRegionId.value}).then((res: any) => {
    networkOptions.value = res.data?.vpcs.map((item: any) => {
      return {
        label: `${item.name}(${item.cidr})`,
        value: item.id
      }
    })
    network.value = networkOptions.value[0].value;
    Bus.emit("network", network.value);
    subnetList();
  });
};

// 获取子网列表
const subnetList = () => {
  listSubnets({ vpc_id: network.value, limit: "10"}).then((res: any) => {
    subnetOptions.value = res.data?.subnets.map((item: any) => {
      return {
        label: `${item.name}(${item.cidr})`,
        value: item.id
      }
    })
    nics.value[0].subnet_id =  subnetOptions.value[0].value;
    subnetChange();
  })
}

// 静态
const jing = (item) => {
  if (item.value == '5_bgp') {//动态
    jingDongType.value = "19_bgp";
  } else {//静态
    jingDongType.value = "19_sbgp";
  }
  dongJIngTypeList.value.forEach(i => {
    if (item.value == i.value) {
      i.type = 'primary';
    } else {
      i.type = '';
    }
  })
  Bus.emit("iptype", item.value);
  getPrice();
};

//获取镜像列表
const getImagesList = () => {
  glanceListImages({
    __imagetype: "gold",
    status: "active",
    // __support_kvm: true,
    virtual_env_type: "FusionCompute",
    regionId: currentRegionId.value,
    flavor_id: currentSpec.value.id || null, // 规格ID
  }).then((res: any) => {
    imagesList.value = <any>[];
    imagesListAll.value = res.data.images;
    res.data.images.forEach((item: any) => {
      if (imagesList.value.length == 0 || !imagesList.value.some((i: any) => i.__platform == item.__platform)) {
        imagesList.value.push(item);
      }
    });
    selectStymOptions.value = imagesList.value;
    selectBanbenOptions.value = [];
  });
}

// 操作系统列表
const visibleChange = () => {
  selectBanbenOptions.value = [];
  selectBanbenOptions.value = imagesListAll.value.filter((item: any) => item.__platform == selectStym.value);
  selectBanbenValue.value = '';
  Bus.emit("selectStym", selectStym.value);
};

// 操作系统版本列表
const visibleBanbenChange = () => {
  selectBanbenOptions.value.forEach((item: any) => {
    if (selectBanbenValue.value === item.__os_version) {
      Bus.emit("__os_version", item);
    }
  });
};

// 添加数据盘
const tianjia = () => {
  data_volume.value.push({
    diskType: "",
    size: 1,
  });
};

//删除数据盘
const reduce = (index) => {
  data_volume.value.splice(index, 1);
  Bus.emit("data_volume", data_volume.value);
  getPrice();
}

// 系统盘
const stytemValueChange = (e) => {
  getPrice();
  Bus.emit("stytemValueChange", e);
};

// 购买
const handleBuy = () => {
  isBuy.value = true;
  router.push({
    path: "/client/cloudService/components/shoppingHome",
    query: {
      type: 'buy'
    },
  });
  getPrice();
}

//传递自定义服务器名称
const getSerivceName = () => {
  Bus.emit("serivceName", serivceName.value);
}
// 购买时长
const renewTypeNumChange = (e) => {
  getPrice();
  Bus.emit("timeSpecificationValue", timeSpecificationValue.value);
};
// 切换子网
const subnetChange = () => {
  Bus.emit("nics", nics.value);
}
const isNumber = () => {
  getPrice()
  Bus.emit("stytemNum", stytemNum.value);
};
const isNumber1 = () => {
  getPrice()
  Bus.emit("data_volume", data_volume.value);
};
const isNumber2 = () => {
  getPrice()
  Bus.emit("daiKuanNum", daiKuanNum.value);
};
const isNumber3 = () => {
  getPrice()
  Bus.emit("num", numValue.value);
};
const isNumber4 = () => {
  getPrice()
  Bus.emit("stytemsValue", stytemsValue.value);
};
const isNumber5 = () => {
  getPrice()
  Bus.emit("passWord", passWord.value);
};
const isNumber6 = () => {
  getPrice()
  Bus.emit("surePassWord", surePassWord.value);
};
// 自动续费
const changeRenewal = () => {
  getPrice()
  Bus.emit("radio", autoRenewal.value);
};
</script>
<style lang="less" scoped>
.ipValue {
  width: 50px;
  position: relative;
}
.min-container {
  position: relative;
}
.network {
  margin: 20px 0;

  .network-select {
    margin-right: 20px;
    width: 200px;
  }
}
/deep/ .el-input__inner {
  text-align: center;
}
.con {
  width: 100%;
  margin-top: 20px;
  height: auto;
  box-shadow: -5px 5px 20px 0px #e3e8f080;
  .title {
    width: 100%;
    height: 58px;
    background: #e7ebf2;
    line-height: 58px;
    font-size: 16px;
    font-weight: 600;
    color: #313131;
  }
  .con-context {
    width: 100%;
    padding: 30px;
    background: #ffffff;
    .regionTitle {
      width: 100%;
      font-size: 16px;
      font-weight: 600;
      color: #313131;
    }
    .regionCon {
      width: 100%;
      margin-top: 20px;
      background: #fafbfc;
      height: 208px;
      margin-bottom: 30px;
      position: relative;
      display: flex;
      .regionCon-left {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        padding-left: 20px;
        .recommendedAreas {
          position: absolute;
          width: 380px;
          height: 150px;
          padding: 8px;
          top: 45px;
          border: 1px solid rgba(64, 152, 255, 0.4);
          display: flex;
          right: 20px;
          .recommend {
            width: 80px;
            margin-top: 7px;
          }
          .areas {
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            .areasItem {
              width: 135px;
              height: 30px;
              padding: 0 10px;
              border: 1px solid rgba(64, 152, 255, 0.1);
              text-align: center;
              line-height: 30px;
              &:nth-child(2n - 1) {
                margin-right: 10px;
              }
              &:hover {
                cursor: pointer;
                color: #4098ff;
              }
            }
          }
        }
      }
      .regionCon-right {
        flex: 9;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        .select {
          width: 600px;
          height: 36px;
          text-align: center;
          line-height: 36px;
          border: 1px solid #d9d9d9;
          &:hover {
            cursor: pointer;
            color: #4098ff;
          }
        }
        .selectable {
          span {
            display: inline-block;
            min-width: 60px;
            height: 36px;
            font-size: 12px;
            text-align: center;
            line-height: 36px;
            margin-right: 20px;
            padding: 0 10px;
            background: rgba(64, 152, 255, 0.10);
            color: #4098FF;
            cursor: pointer;
          }
          .active {
            background: #4098ff;
            color: #fff;
          }
        }
      }
    }
    .spec-gray {
      width: 100%;
      margin-top: 10px;
      background: #fafbfc;
      padding: 30px 20px;
      .cpuTypeList {
        width: 100%;
        height: 36px;
        margin-bottom: 20px;
        display: flex;
        span {
          width: 100px;
          line-height: 36px;
          text-align: center;
        }
        .CPUarchitecture {
          width: 100%;
          height: 100%;
          display: flex;
          > div {
            width: 100px;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 10px;
            background: rgba(64, 152, 255, 0.1);
            color: #4098ff;
              &:hover {
                cursor: pointer;
            }
          }
          .active {
            color: #ffffff;
            background: rgba(64, 152, 255, 1);
          }
        }
      }
      .spec-box {
        width: 100%;
        padding-left: 10px;
        margin-bottom: 20px;
        span {
          background: #4098ff;
          color: #fff;
          display: inline-block;
          vertical-align: middle;
          min-width: 96px;
          height: 36px;
          padding: 0 10px;
          font-size: 12px;
          text-align: center;
          line-height: 36px;
          margin-right: 20px;
        }
        .active {
          background: rgba(64, 152, 255, 0.10);
          color: #4098FF;
        }
      }
      .specificationOutside {
        width: 100%;
        height: 300px;
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: auto;
        .spec-outside {
          width: 100%;
          flex: 1;
          display: flex;
          flex-direction: column;
          position: relative;
          .title {
            width: 100%;
            height: 40px;
            display: flex;
            position: sticky;
            top: 0;
            justify-content: space-between;
            align-items: center;
            background: #f6f8fa;
            >div {
              flex: 1;
              text-align: center;
            }
          }
          .spec-item {
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            >div {
              flex: 1;
              text-align: center;
            }
          }
          .active {
            color: #fff;
            background: #223f9d;
          }
        }
      }
      .specBottom {
        width: 100%;
        padding: 10px 20px;
        height: 50px;
        position: sticky;
        bottom: 0;
        font-size: 14px;
        font-weight: bold;
        background: #e1ecfd;
      }
    }
    .spec-between {
      display: flex;
      align-items: center;
      font-size: 20px;
      justify-content: space-between;
      span {
        color: #ff3939;
        font-weight: 600;
      }
    }
    .spec-label {
      padding-top: 18px;
    }
    .spec-value {
      display: flex;
      flex-direction: column;
      .images {
        width: 100%;
        height: 110px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .imagesTitle {
          width: 185px;
          height: 36px;
          text-align: center;
          line-height: 36px;
          border: 1px solid #d9d9d9;
          color: #313131;
        }
        .imagesCon {
          width: 100%;
          display: flex;
        }
      }
      .clouds {
        width: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
        .cloudTitle {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          border-bottom: 1px solid rgba(227, 232, 240, 0.5);
          margin-top: 10px;
          .yunTitle {
            display: inline-block;
            width: 185px;
            height: 36px;
            text-align: center;
            line-height: 36px;
            border: 1px solid #d9d9d9;
            margin-bottom: 20px;
            color: #313131;
          }
          .systemDisk {
            width: 100%;
            height: 36px;
            display: flex;
            align-items: center;
            color: #313131;
            margin-bottom: 10px;
            .addSubtractBox {
              width: 173px;
              height: 36px;
              margin: 0 20px;
            }
          }
          .dataDisk {
            width: 100%;
            display: flex;
            align-items: center;
            color: #313131;
            margin-bottom: 10px;
            .addSubtractBox {
              width: 173px;
              height: 36px;
              margin: 0 20px;
            }
          }
        }
        .cloudBottom {
          width: 100%;
          height: 50px;
          line-height: 50px;
          display: flex;
          align-items: center;
          color: #313131;
          .addSubtractBox {
            width: 173px;
            height: 36px;
            margin: 0 20px;
          }
        }
      }
      .times {
        width: 100%;
        height: 36px;
        margin: 12px 0;
      }
      .nums {
        width: 100%;
        height: 36px;
        display: flex;
        align-items: center;
        color: #313131;
        margin: 12px 0 8px;
        .addSubtractBox {
          width: 173px;
          height: 36px;
          margin-right: 30px;
        }
      }
      .userName {
        margin: 18px 0 10px;
      }
      .isAnmount {
        width: 300px;
        margin: 12px 0;
      }
      .passWord {
        width: 300px;
        margin: 15px 0;
      }
    }
    .selectSpecification {
      width: 100%;
      display: flex;
      padding-left: 10px;
      margin-bottom: 20px;
    }
  }
}
.selectPop {
  height: 400px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  .pop-item {
    flex: 1;
    display: flex;
    width: 100%;
    &:hover {
      background: rgba(217, 217, 217, 0.1);
      position: relative;
      .selectLeft::before {
        content: '';
        position: absolute;
        left: 95px;
        width: 3px;
        height: 100%;
        background-color: #4098ff;
      }
    }
    .selectLeft {
      flex: 2;
      display: flex;
      justify-content: center;
      align-items: center;
      border-right: 1px solid #d9d9d9;
    }
    .selectRight {
      flex: 9;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      padding: 10px 20px 0 20px;
      .select-item {
        width: 180px;
        height: 30px;
        margin-right: 10px;
        margin-bottom: 10px;
        display: flex;
        background: rgba(225, 236, 253, 1);
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        &:hover {
          cursor: pointer;
          color: #fff;
          background-color: #4098ff;
        }
      }
    }
  }
}
</style>
